<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/main.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>

    <style>
        .wizard.wizard-tabbed ul li {
            padding: 0 30px;
            background-color: #fbfbfb
        }

        .wizard.wizard-wired ul {
            display: table;
            width: 100%;
            position: relative
        }

        .wizard.wizard-wired ul li {
            display: table-cell;
            text-align: center;
            background-color: #fff;
            width: 20%;
            padding: 0;
            margin: 0;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease
        }

        .wizard.wizard-wired ul li:before {
            display: block;
            content: "";
            width: 100%;
            height: 2px !important;
            font-size: 0;
            overflow: hidden;
            background-color: #e5e5e5;
            position: relative !important;
            top: 25px;
            z-index: 1 !important
        }

        .wizard.wizard-wired ul li:first-child:before {
            max-width: 51%;
            left: 50%
        }

        .wizard.wizard-wired ul li:last-child:before {
            max-width: 50%;
            width: 50%
        }

        .wizard ul {
            list-style: none outside none;
            padding: 0;
            margin: 0;
            width: 4000px
        }

        .wizard ul li {
            float: left;
            margin: 0;
            padding: 0 20px 0 30px;
            line-height: 46px;
            position: relative;
            background: #f5f5f5;
            color: #d0d0d0;
            font-size: 16px;
            cursor: default;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease
        }

        .wizard ul li:first-child {
            -webkit-border-radius: 2px 0 0 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px 0 0 0;
            -moz-background-clip: padding;
            border-radius: 2px 0 0 0;
            background-clip: padding-box;
            padding-left: 20px
        }

        .layui-form-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>

</head>

<body>
<div class="layui-fluid larry-wrapper" id="StandardVUE">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <form action="" class="layui-form layui-form-pane" id="myform" style="position: relative;top: 47px;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">库位名称</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" lay-verify="required" name="mc" id="mc"
                                       placeholder="请输入库位名称"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">库区名称</label>
                            <div class="layui-input-inline">
                                <select lay-ignore="lay-ignore" class="js-data-example-ajax" name="sskqid" id="sskqid"
                                        style="width: 193px"></select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">可承受重量</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="cszl" id="cszl" value="0"
                                       placeholder="请输入可承受重量" lay-verify="zs|validatezs"/>
                            </div>
                            <label style="float: right;margin-top: 10px">kg</label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">库位托盘数</label>
                            <div class="layui-input-inline">
                                <input type="text" name="tps" id="tps" placeholder="请输入库位托盘数" value="1" autocomplete="off"
                                       class="layui-input" lay-verify="number|validateMoney" value="0">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">库位层数</label>
                            <div class="layui-input-inline">
                                <input type="text" name="cs" placeholder="请输入库位层数" value="1" autocomplete="off"
                                       class="layui-input" lay-verify="number|validateMoney">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">可容纳体积</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="rntj" id="rntj" value="0"
                                       placeholder="可容纳体积" lay-verify="zs|validatezs"/>
                            </div>
                            <label style="float: right;margin-top: 10px">cm³</label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">拣货顺序</label>
                            <div class="layui-input-inline">
                                <input type="text" name="xlsx" placeholder="请输入拣货顺序" value="0" autocomplete="off"
                                       class="layui-input" lay-verify="number|validateMoney">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">库位属性</label>
                            <div class="layui-input-inline">
                                <select name="sx">
                                    <option value="0">正常</option>
                                    <option value="1">封存</option>
                                    <option value="2">管控</option>
                                    <option value="3">禁入</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">库位类型</label>
                            <div class="layui-input-inline">
                                <select name="lx" lay-filter="lxa">
                                    <option value="0">存储库位</option>
                                    <option value="1">件拣货库位</option>
                                    <option value="2">箱拣货库位</option>
                                    <option value="3">箱/件拣货库位</option>
                                    <option value="4">暂存库位</option>
                                    <option value="5">集货库位</option>
                                    <option value="6">组装工作库位</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <input type="text" name="bz" placeholder="备注" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">货品混放</label>
                            <div class="layui-input-inline">
                                <select name="hphf" id="hphf" lay-filter="test">
                                    <option value="0">不允许</option>
                                    <option value="1">允许</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">库位高度</label>
                            <div class="layui-input-inline">
                                <input type="text" name="kwgd" placeholder="请输入库位高度" value="0" autocomplete="off"
                                       class="layui-input" lay-verify="zs|validatezs">
                            </div>
                            <label style="float: right;margin-top: 10px">m</label>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">可用系数</label>
                            <div class="layui-input-inline">
                                <input type="text" name="kyxs" id="kyxs" lay-verify="number" placeholder="请输入库位可用系数"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" id="div1">
                            <label class="layui-form-label" >批次混放</label>
                            <div class="layui-input-inline">
                                <select name="pchf" id="pchf">
                                    <option value="0">不允许</option>
                                    <option value="1">允许</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="float: right;">
                        <div class="layui-input-block">
                            <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="addkuwei">立即提交
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>

    $(function () {
        //查询库区
        $('.js-data-example-ajax').select2({
            ajax: {
                url: '/zxsswms/wmslibraryposition/addSearchArea',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        mc: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr = new Array();
                    console.log('data', data);
                    if (data) {
                        for (var i = 0; i < data.length; i++) {
                            arr.push({id: data[i].id, text: data[i].mc});
                        }
                    }
                    console.log(arr);
                    // Tranforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询字段',
            allowClear: true
        });

    })
    layui.use(['myform', 'zzpUtils', 'form'], function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils;
        //自定义验证规则-只能输入数字
        form.verify({
            validateMoney: function (value) {
                if (value != '') {
                    if (!/^\d+$/.test(value)) {
                        return '只能填写整数';
                    }
                }
            }
        });
        form.verify({
            validatezs: function (value) {
                if (value != '') {
                    if (!/^\d+(\.{0,1}\d+){0,1}$/.test(value)) {
                        return "请输入非负数";
                    }
                }
            }
        });
        form.on("submit(addkuwei)", function (data) {
            var tps=$("#tps").val();
            if ($("#kyxs").val() > 1 || $("#kyxs").val() < 0) {
                layer.msg("库位可用系数需在0-1之间");
            } else if ($("#sskqid").val() == null) {
                layer.msg("库区名称不可为空");
            } else {
                if($("#hphf").val()==1){
                    console.log(data.field);
                    data.field.pchf=1;
                }
                zzpUtils.confirm("是否确定新增?", function (index) {
                    zzpUtils.action({
                        url: "/wmslibraryposition/add",
                        data: JSON.stringify(data.field),
                        success: function (data) {
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                                top.layer.msg(data.title + "," + data.message);
                            }, 500);
                        }, error: function (xhr, textStatus) {
                            console.log(textStatus);
                            console.log(xhr)
                        }
                    })
                })
            }
            return false;

        });
        form.on('select(test)', function (data) {
            if (data.value == 1) {
                $("#div1").hide();
            } else if (data.value == 0) {
                $("#div1").show();
            }
        });
        form.on('select(lxa)', function (data) {
            if (data.value ==4||data.value==5) {
                //隐藏
                $("#div1").hide();
                //禁用并且默认为允许
                $('#hphf').val("1");
                $('#pchf').val("1");
                document.getElementById('hphf').setAttribute('disabled','true');
                form.render();
            }else{
                $('#hphf').prop("disabled",false);
                form.render();
            }
        });
    });

</script>
</html>